<#assign ctx>${rc.contextPath}</#assign>
<script>
	$(function() {
		$("span.collapsed").click(function() {
			var targtId = $(this).attr("href").replace("#", "");
			$(".accordion-body[id!=" + targtId + "]").attr("class", "accordion-body collapse").css("height", "0px");
			//控制打开和开闭图标变化
			var i = $(this).find("i");
			if (i.hasClass("icon-folder-open")) {
				i.attr("class", "icon-folder-close");
			} else {
				$(".icon-folder-open").each(function() {
					$(this).attr("class", "icon-folder-close");
				});
				i.attr("class", "icon-folder-open");
			}
		});
		$("a[item]").click(function() {
			$("i.icon-arrow-right").remove();
			var parent = $(this).parent();
			parent.append("<i class='icon-arrow-right'></i>");
		});
	});
</script>
<style>
.accordion-toggle {
	font-weight: bold;
	color: #82c341;
	background-color: #F5F5F5;
}

.accordion-inner i.icon-arrow-right {
	position: absolute;
	right: 25px;
}

dd {
	border-bottom: 1px dashed blue;
	margin: 5px;
	padding-left: 16px;
	padding-bottom: 4px;
	display: inline-block;
	width: 80%;
}

.accordion-inner {
	padding: 0px;
}
</style>
<div class="accordion">
	<#list groupMap?keys as key>
	<div class="accordion-group">
		<#assign group=groupMap[key] />
		<div class="accordion-heading">
			<span href="#collapse${group.id}" data-toggle="collapse" class="accordion-toggle collapsed">
				<i class="icon-folder-close"></i>
				${group.name}
			</span>
		</div>
		<div class="accordion-body collapse" id="collapse${group.id}" style="height: 0px;">
			<div class="accordion-inner">
				<dl>
					<#list menuMap[key] as menu>
					<dd title="${menu.memo}">
						<i class="${menu.icon}"></i>
						<a item href="${ctx}${menu.url}">${menu.name} </a>
					</dd>
					</#list>
				</dl>
			</div>
		</div>
	</div>
	</#list>
</div>